<template>
    <div class="father">
        自定义学习
        <div class="box">
            <Left></Left>
            <Right></Right>
        </div>
        <button @click="comName='Left'">展示左侧</button>&nbsp;&nbsp;<button @click="comName='Right'">展示右侧</button>
        <!--当组件切换时，保持数据的完整-->
        <keep-alive include="Left">
            <component :is="comName"></component>
        </keep-alive>
    </div>
</template>

<script>
    import Left from '@/components/dynamic-component/Left.vue';
    import Right from '@/components/dynamic-component/Right.vue';
    export default {
        name: "father",
        data(){
            return {
                comName: 'Left'
            }
        },
        components: {
            Left, Right
        }
    }
</script>

<style scoped>
    .father{

    }
    .box{
        display: flex;
    }
</style>
